import React, { useEffect, useLayoutEffect, useState } from 'react';
import { Col, Row } from 'antd';
import { Card } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
import { Select } from 'antd';
import { Graph } from "@antv/x6";
import { useSearchParams } from '@umijs/max';

const Page: React.FC = () => {

    let graph: Graph;
    
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
   
    useEffect(() => {
        graph = new Graph({
          container: document.getElementById("container") as HTMLElement,
          width: 800,
          height: 600,
          background: {
            color: "#F2F7FA",
          },
        });

        graph.addNode({
            id: 'element',
            x: 240,
            y: 60,
            width: 100,
            height: 180,
            attrs: {
              body: {
                fill: '#f5f5f5',
                stroke: '#d9d9d9',
                strokeWidth: 1,
              },
              text: {
                "fontSize": 14,
                "fill": "#000000",
                "refX": 0.5,
                "refY": 0.5,
                "textAnchor": "middle",
                "textVerticalAnchor": "middle",
                "fontFamily": "Arial, helvetica, sans-serif",
                "text": "元件"
              },
            },
            ports: [
              {
                id: 'port1',
                attrs: {
                  circle: {
                    magnet: true,
                    r: 5,
                    stroke: '#31d0c6',
                    fill: '#fff',
                    strokeWidth: 2,
                  },
                },
              },
            ],
        });
    
        // 在 useEffect 函数中返回一个清除函数
        return () => {
          graph.dispose(); // 销毁 Graph 实例
        };
    }, []);
    
    const [form] = Form.useForm();

    const onFinish = (values: any) => {
        const node = graph.getNodes().find(x => x.id == 'element');
        if (node)
        {
            node.portProp('port1', "attrs/circle/strokeWidth", parseInt(values.portStrokeWidth));
            node.portProp('port1', "attrs/circle/r", parseInt(values.r));
        }
    };

    return (
    <>
        <Row gutter={16}>
            <Col className="gutter-row" span={10}>
                <Card title="端口可视化配置参数">
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="端口名"
                            name="portName"
                            rules={[{ required: true, message: '请输入端口名' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="能源系统类型"
                            name="portType"
                        >
                             <Select
                                defaultValue="powersystem"
                                options={[
                                    { value: 'powersystem', label: '电力系统' },
                                    { value: 'heatingsystem', label: '供热系统' },
                                    { value: 'coolingsystem', label: '供冷系统' },
                                    { value: 'gassystem', label: '天然气系统' },
                                    { value: 'informationsystem', label: '信息系统'},
                                ]}
                            />
                        </Form.Item>

                        <Form.Item
                            label="尺寸"
                            name="r"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="线条宽度"
                            name="portStrokeWidth"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="线条颜色"
                            name="portStroke"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                        <Checkbox>Remember me</Checkbox>
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            渲染
                        </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </Col>
            <Col className="gutter-row" span={14}>
                <Card title="端口渲染效果">
                    <div style={{ height: 600 }}>
                      <div id="container"></div>
                    </div>
                </Card>
            </Col>
        </Row>  
    </>
  );
};
export default Page;

